import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Hello from "../views/Hello";

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    // component:Home
    //命名视图
    components: {
          home:Home
    },
    //这是在路由里使用的守卫(独享)
    beforeEnter:(to,from,next) =>{
      // console.log(to,'to') //下一个的参数
      // console.log(from,'from')//上一个的参数
      // console.log(next,'next')//跳转到第一个
      // if (from.meta.title == '关于我们'){
      //   //不写参数就默认跳转当前路由
      //   next();
      // }else {
      //   //写了参数就跳转到参数的那个路由
      //   next('/hello');
      // }
      next();
    }
  },
  {
    path: '/hello/:num/:num2',
    name: 'Hello',
    // component:Hello
    //命名视图
    components: {
      hello:Hello
    },
    //children 在路由里插入子路由，插入的可能不在一个所以是数组格式
    //在那个路由下插入的子路由，就只能在那个路由的组件下使用
    children:[
      {
        path:'xiaoli',
        name:'Xiaoli',
        component:()=>import('../views/about/Xiaoli.vue'),
      },
      {
        path:'ergou',
        name:'Ergou',
        component:()=>import('../views/about/Ergou.vue'),
      }
    ]
  },
  {
    // path: '/about/:a',
    path: '/about',
    name: 'About',
    //这个是路由懒加载模式
    component: () => import('../views/About.vue'),
    props:true,
    // redirect: '/hello',//重定向
    alias:'/ab',//别名
    meta:{title:'关于我们'}
  },
  {
    path: '*',
    name: 'Incorrect',
    component:()=>import('../views/Incorrect.vue'),
  }
]

const router = new VueRouter({
  // mode:'history',  //去除地址栏的#号
  // mode:'hash', //默认
  // mode:'abstract', //开发者模式
  routes
})
//这是全局的守卫，不管到哪里都会执行
router.beforeEach(((to, from, next) =>{
  // console.log(to)
  // console.log(from)
  // console.log(next)
  next();
}))

export default router
